<template>
  <div class="content">
    <span v-if="isShowSelectedNum">
      <span v-if="isSelected">
        <span>已选择</span>
        <span v-for="item in props.selectInfoList.filter(item=>item.data.length)">
          <span class="num">{{ formatNum(item) }}</span>
          <span>{{ formatUit(Number(item.type)) }}</span>
          <span>{{ formatName(Number(item.type)) }}，</span>
        </span>
      </span>
      <span v-if="isUpload">
        <span v-if="uploadTextList.some(item => item.type === 3)">
          <span>已本地创建</span>
          <span>
            <span class="num">{{ uploadTextList[0].num }}</span>
            <span>{{ `${uploadTextList[0].unit}${uploadTextList[0].name}，` }}</span>
          </span>
          <span v-if="uploadTextList.slice(1).length">
            <span>已本地上传</span>
            <span v-for="item in uploadTextList.slice(1)">
              <span class="num">{{ item.num }}</span>
              <span>{{ `${item.unit}${item.name}，` }}</span>
            </span>
          </span>
        </span>
        <span v-else>
          <span>已本地上传</span>
          <span v-for="item in uploadTextList">
            <span class="num">{{ item.num }}</span>
            <span>{{ `${item.unit}${item.name}，` }}</span>
          </span>
        </span>
        
      </span>
    </span>
    <span v-else>未选择任何素材，</span>
    <span>您还可选</span>
    <span class="num">{{ props.remainNum }}</span>
    <span>个素材</span>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref, computed, inject } from 'vue'

  const tabs = ref([
    { id: 2, type: '1', name: '图片', nameStr: 'pic'},
    { id: 3, type: '4', name: '音频', nameStr: 'audio'},
    { id: 4, type: '2', name: '视频', nameStr: 'video'},
    { id: 5, type: '5', name: '文件', nameStr: 'file'},
    { id: 6, type: '3', name: '链接', nameStr: 'link'},
    { id: 1, type: '0', name: '文本', nameStr: 'text'},
    { id: 8, type: '6', name: '抽奖', nameStr: 'luck'},
    { id: 27, type: '9', name: '收集表', nameStr: 'collect'},
    { id: 99, type: '7', name: '商品素材 ', nameStr: 'ecommerce'},
    { id: 99, type: '8', name: '页面素材 ', nameStr: 'ecommerce'},
    { id: 15, type: '10', name: '公众号图文', nameStr: 'officialAccounts'},
    { id: 11, type: '11', name: '小程序', nameStr: 'miniProgram'}
  ])

  interface Props {
    baseId: number|string
    selectNameStr: number|string
    totalNum: number
    selectInfoList: any[]
    localData: any[],
    remainNum: number
  }
  
  const props = withDefaults(defineProps<Props>(), {
    baseId: 2,
    selectNameStr: '',
    totalNum: 9,
    selectInfoList: ()=>[],
    localData: ()=>[],
    remainNum: 9
  })

  const isSelected = computed(() => props.selectInfoList.some(item=>item.data.length))
  const isUpload = computed(() => !!props.localData.length)
  const isShowSelectedNum = computed(() => isSelected.value || isUpload.value)

  const uploadTextList = computed(() => {
    if(isUpload.value){
      return formatLocalData()
    }else{
      return []
    }
  })

  const formatLocalData = () => {
    let arr: Array<any> = []
    if(!!props.localData.length){
      props.localData.forEach((item: any) => {
        const index = arr.findIndex(ite => ite.type === Number(item.type))
        if(index > -1){
          arr[index].num++
        }else{
          const num = 1
          const type = Number(item.type)
          const name = formatName(type)
          const unit = formatUit(type)
          if(type === 3){
            arr.unshift({num, type, name, unit})
          }else{
            arr.push({num, type, name, unit})
          }
        }
      })
    }
    return arr
  }

  const formatName = (type: number) => {
    return tabs.value.find(item => Number(item.type) === type)?.name
  }

  const formatUit = (type: number) => {
    return type === 1 ? '张' : '个'
  }

  const formatNum = (item: any) => {
    return item?.data?.length
  }

</script>

<style lang="scss" scoped>
  .content{
    width: 100%;
    span{
      font-size: 14px;
      font-family: STHeitiSC-Light, STHeitiSC;
      font-weight: 300;
      line-height: 1.4;
      color: #33302d;
    }
    .num{
      color: #ff6b00;
      margin: 0 5px;
    }
  }


</style>
